import React, { FC, useContext, useState } from 'react';
import { Form, Input, InputNumber, Select, Button, Tabs } from 'antd';
import { DesignRedux } from '../../DesignRedux';
import { Controlled as CodeMirror } from 'react-codemirror2';
import { BorderOutlined } from '@ant-design/icons';

const { Option } = Select;
const { TabPane } = Tabs;

const layout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 18 },
};
const tailLayout = {
  wrapperCol: { offset: 8, span: 16 },
};

const AttributeFC = () => {
  const [form] = Form.useForm();
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [cssText, setCssText] = useState('');

  // 在使用useContext解构出color中想要传递的值，就是最终返回给我们的值
  const { globalState, dispatch } = useContext(DesignRedux);
  const { rightNode, schema } = globalState; // 右侧元素属性

  form.setFieldsValue({
    ...rightNode,
  });

  // TODO 动态修改各种属性
  return (
    <Form
      {...layout}
      form={form}
      // layout="vertical"
      onFieldsChange={(_, allFields) => {
        console.log('====', _);
      }}
    >
      <Form.Item label="组件id" name="id" tooltip="组件唯一 id">
        <Input placeholder="组件 id" />
      </Form.Item>

      <Form.Item label="标题" name="title" tooltip="组件名称">
        <Input placeholder="组件名称" />
      </Form.Item>

      <Form.Item name="backgroundColor" label="背景色">
        <Select
          suffixIcon={<BorderOutlined style={{ color: 'red' }} />}
          placeholder="Select a option and change input text above"
          allowClear
        >
          <Option value="male">male</Option>
          <Option value="female">female</Option>
          <Option value="other">other</Option>
        </Select>
      </Form.Item>

      <Form.Item name="fontSize" label="字体大小">
        <Select
          placeholder="Select a option and change input text above"
          allowClear
        >
          <Option value="male">male</Option>
          <Option value="female">female</Option>
          <Option value="other">other</Option>
        </Select>
      </Form.Item>

      <Tabs defaultActiveKey="1">
        <TabPane tab="样式" key="2">
          <CodeMirror
            value={cssText}
            options={{
              lineNumbers: true, //显示行号
              mode: 'css', //语言
              autofocus: true, //自动获取焦点
              styleActiveLine: true, //光标代码高亮
              theme: 'yonce', //主题
              scrollbarStyle: 'overlay',
              lineWrapping: false, //代码自动换行
              foldGutter: true,
              gutters: ['CodeMirror-linenumbers', 'CodeMirrorfoldgutter'], //end
              //括号匹配
              matchBrackets: true,
              // 智能提示
              extraKeys: { 'Ctrl-Space': 'autocomplete' }, //ctrl-space唤起智能提示
            }}
            onBeforeChange={(editor, data, value) => {
              setCssText(value);
            }}
            onChange={(editor, data, value) => {}}
          />
        </TabPane>

        <TabPane tab="属性" key="1"></TabPane>

        <TabPane tab="html" key="3"></TabPane>
      </Tabs>
    </Form>
  );
};

export default AttributeFC;
